<template>
  <el-dialog
    :visible.sync="incomingStatus"
    :close-on-click-modal="false"
    width="900px"
    append-to-body
    :before-close="handleClose"
  >
    <el-form ref="form" :model="form">
      <el-row :gutter="20">
        <el-col :span="7">
          <el-form-item label="类型" label-width="80px" prop="type">
            <el-select v-model="form.type" placeholder="请选择类型" @change="chooseType(form.type)">
              <el-option label="全部" value="0"></el-option>
              <el-option label="来账" value="1"></el-option>
              <el-option label="BP账" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="7">
          <el-form-item label="交易流水号" label-width="80px" prop="bepsId">
            <el-input placeholder="请输入交易流水号" v-model="form.bepsId" />
          </el-form-item>
        </el-col>

        <el-col :span="7">
          <el-form-item label="收款人账号" label-width="80px" prop="colleNo">
            <el-input placeholder="请输入收款人账号" v-model="form.colleNo" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="7">
          <el-form-item label="收款人名称" label-width="80px" prop="colleName">
            <el-input placeholder="请输入收款人名称" v-model="form.colleName" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="工作日期" label-width="80px" prop="workDate">
            <el-date-picker
              v-model="form.workDate"
              type="daterange"
              style="width: 100%"
              range-separator="-"
              value-format="yyyyMMdd"
              start-placeholder="请输入工作开始日期"
              end-placeholder="请输入工作结束日期"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="7">
          <el-form-item label="交易类别" label-width="80px" prop="businessType">
            <el-select v-model="form.businessType" placeholder="请选择交易类别">
              <el-option label="商业汇票" value="5"></el-option>
              <el-option label="跨境业务" value="6"></el-option>
              <el-option label="金融机构" value="7"></el-option>
              <el-option label="异常" value="8"></el-option>
              <el-option label="HotScan检查异常" value="9"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="10">
          <el-form-item label="金额区间" label-width="80px">
            <el-row>
              <el-col :span="10">
                <el-form-item prop="miniMoney">
                  <el-input placeholder="最小金额" v-model="form.miniMoney" />
                </el-form-item>
              </el-col>
              <el-col :span="1" style="margin-left: 5px">-</el-col>
              <el-col :span="10">
                <el-form-item prop="maxMoney">
                  <el-input placeholder="最大金额" v-model="form.maxMoney" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search(form)">搜索</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>

      <el-table :data="tableData"  style="width: 100%; margin-top: 10px" height="400px">
        <el-table-column prop="type" label="类型" sortable width="150"></el-table-column>
        <el-table-column prop="transNo" label="交易流水号" sortable width="250"></el-table-column>
        <el-table-column prop="colleNo" label="收款人账号" sortable width="250"></el-table-column>
        <el-table-column prop="colleName" label="收款人名称" sortable width="250"></el-table-column>
        <el-table-column prop="workDate" label="工作日期" sortable width="250"></el-table-column>
        <el-table-column prop="businessType" label="交易类别" sortable width="150"></el-table-column>
        <el-table-column prop="moneyRange" label="金额" sortable width="250"></el-table-column>
        <el-table-column prop="sysNO" label="系统编号" sortable width="250"></el-table-column>
        <el-table-column prop="accDate" label="处理时间" sortable width="250"></el-table-column>
        <el-table-column prop="accTime" label="处理状态" sortable width="150"></el-table-column>
        <el-table-column fixed class="table-header-cell" label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click.native.prevent="choose(scope.$index, tableData)" type="text" size="small">
              选择
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="10"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="20"
        ></el-pagination>
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  name: "snapsIncoming",

  data() {
    return {
      currentPage4: 1, // 分页
      // 是否显示弹出层
      incomingStatus: false,
      // 来源标识 为了服用区分是哪个选项触发的
      flag: "",

      form: {
        bepsId: "", // 交易流水号
        cpgDate: "", // CPG日期
        nonStp: "", // non-STP原因
        workDate: "", // 工作日期
        resource: "1", // 选项
        trabsDate: "", // 交易起息日期
        type: "0", // 类型
        colleNo: "", // 收款人账号
        colleName: "", // 收款人名称
        businessType: "", // 交易类别
        miniMoney: "", // 最小金额
        maxMoney: "", // 最大金额
      },

      tableData: [
        {
          type: "来账", // 类型
          transNo: "12345678901111", // 交易流水号
          colleNo: "4355656557854678", // 收款人账号
          colleName: "张三", // 收款人名称
          workDate: "2023-10-09", // 工作时间
          businessType: "商业汇票", // 交易类别
          moneyRange: "100,000", // 金额
          sysNO: "3124454565467", // 系统编号
          accDate: "2023-11-11", // 处理时间
          accTime: "待处理", // 处理状态
        },
        {
          type: "来账", // 类型
          transNo: "12345678901111", // 交易流水号
          colleNo: "4355656557854678", // 收款人账号
          colleName: "张三", // 收款人名称
          workDate: "2023-10-09", // 工作时间
          businessType: "商业汇票", // 交易类别
          moneyRange: "100,000", // 金额
          sysNO: "3124454565467", // 系统编号
          accDate: "2023-11-11", // 处理时间
          accTime: "待处理", // 处理状态
        },
        {
          type: "来账", // 类型
          transNo: "12345678901111", // 交易流水号
          colleNo: "4355656557854678", // 收款人账号
          colleName: "张三", // 收款人名称
          workDate: "2023-10-09", // 工作时间
          businessType: "商业汇票", // 交易类别
          moneyRange: "100,000", // 金额
          sysNO: "3124454565467", // 系统编号
          accDate: "2023-11-11", // 处理时间
          accTime: "待处理", // 处理状态
        },
        {
          type: "来账", // 类型
          transNo: "12345678901111", // 交易流水号
          colleNo: "4355656557854678", // 收款人账号
          colleName: "张三", // 收款人名称
          workDate: "2023-10-09", // 工作时间
          businessType: "商业汇票", // 交易类别
          moneyRange: "100,000", // 金额
          sysNO: "3124454565467", // 系统编号
          accDate: "2023-11-11", // 处理时间
          accTime: "待处理", // 处理状态
        },
        {
          type: "来账", // 类型
          transNo: "12345678901111", // 交易流水号
          colleNo: "4355656557854678", // 收款人账号
          colleName: "张三", // 收款人名称
          workDate: "2023-10-09", // 工作时间
          businessType: "商业汇票", // 交易类别
          moneyRange: "100,000", // 金额
          sysNO: "3124454565467", // 系统编号
          accDate: "2023-11-11", // 处理时间
          accTime: "待处理", // 处理状态
        },
        {
          type: "来账", // 类型
          transNo: "12345678901111", // 交易流水号
          colleNo: "4355656557854678", // 收款人账号
          colleName: "张三", // 收款人名称
          workDate: "2023-10-09", // 工作时间
          businessType: "商业汇票", // 交易类别
          moneyRange: "100,000", // 金额
          sysNO: "3124454565467", // 系统编号
          accDate: "2023-11-11", // 处理时间
          accTime: "待处理", // 处理状态
        },
        {
          type: "来账", // 类型
          transNo: "12345678901111", // 交易流水号
          colleNo: "4355656557854678", // 收款人账号
          colleName: "张三", // 收款人名称
          workDate: "2023-10-09", // 工作时间
          businessType: "商业汇票", // 交易类别
          moneyRange: "100,000", // 金额
          sysNO: "3124454565467", // 系统编号
          accDate: "2023-11-11", // 处理时间
          accTime: "待处理", // 处理状态
        },
        {
          type: "来账", // 类型
          transNo: "12345678901111", // 交易流水号
          colleNo: "4355656557854678", // 收款人账号
          colleName: "张三", // 收款人名称
          workDate: "2023-10-09", // 工作时间
          businessType: "商业汇票", // 交易类别
          moneyRange: "100,000", // 金额
          sysNO: "3124454565467", // 系统编号
          accDate: "2023-11-11", // 处理时间
          accTime: "待处理", // 处理状态
        },
        {
          type: "来账", // 类型
          transNo: "12345678901111", // 交易流水号
          colleNo: "4355656557854678", // 收款人账号
          colleName: "张三", // 收款人名称
          workDate: "2023-10-09", // 工作时间
          businessType: "商业汇票", // 交易类别
          moneyRange: "100,000", // 金额
          sysNO: "3124454565467", // 系统编号
          accDate: "2023-11-11", // 处理时间
          accTime: "待处理", // 处理状态
        },
        {
          type: "来账", // 类型
          transNo: "12345678901111", // 交易流水号
          colleNo: "4355656557854678", // 收款人账号
          colleName: "张三", // 收款人名称
          workDate: "2023-10-09", // 工作时间
          businessType: "商业汇票", // 交易类别
          moneyRange: "100,000", // 金额
          sysNO: "3124454565467", // 系统编号
          accDate: "2023-11-11", // 处理时间
          accTime: "待处理", // 处理状态
        },
      ],

    };
  },

  methods: {
    // 表单重置
    reset() {
      this.resetForm("addForm");
      this.$set(this, "form", {});
    },
    handleClose() {
      this.incomingStatus = false;
    },

    // 搜索
    search(data) {
      console.log(data, "data");
      console.log("搜索");
    },

    //类型下拉框
    chooseType(row) {
      console.log(row, "chooseType");
      if (row == "2") {
        this.form.workDate = ["20231109", "20231110"];
      } else {
        this.form.workDate = ["20231110", "20231110"];
      }
    },

    choose(index, rows, flag) {
      console.log("选择");
      this.$emit("choose", rows[index], flag);
      this.incomingStatus = false;
    },

    show() {
      console.log("show");
      this.incomingStatus = true;
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

    // // 选择
    // choose(index, rows) {
    //   this.$emit("choose", rows[index]);
    //   this.incomingStatus = true;
    // },

    //重置
    reset() {
      console.log("重置");
      this.resetForm("form");
    },

  },
};
</script>

<style>
.page {
  float: right;
}
</style>
